<template>
	<!-- 资金预算管理 -->
	<div class="tobeDone">
		<tableIndex
			:tableData="tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:isSelection="true"
			:isRadio="false"
			:fields="state.fields"
			:height="500"
			:page="state.page"
			@selectChange="selectChange"
			@searchList="searchList"
			@page-change="pageChange"
			@resetList="resetList"
		>
			<!-- 搜索组件插槽 -->
			<template #individuation>
				<el-form-item label="资金预算科目">
					<el-cascader
						class="m-l5"
						v-model="state.searchParam.name"
						:show-all-levels="false"
						:props="props"
					/>
				</el-form-item>
			</template>
			<template #btns> </template>
			<template #operate>
				<el-table-column label="操作" min-width="150" fixed="right">
					<template #default="{ row }">
						<el-button
							v-if="row.status == 0"
							size="small"
							class="button_view"
							type="primary"
							@click="projectProposal(row)"
							>填报</el-button
						>
						<!-- v-if="row.status" -->
						<el-button
							size="small"
							v-if="row.status == 1"
							class="button_view"
							type="primary"
							@click="lookProposal(row)"
							>查看</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>

		<view-dialog ref="viewDialogRef"></view-dialog>
	</div>
</template>

<script setup>
import TableIndex from "@/components/table/index.vue";
import { managementApi } from "@/api/investment.js";
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import ViewDialog from "@/views/investmentProjectManagement/fundManagement/components/dialog.vue";
const state = reactive({
	searchParam: {
		name: "",
	},
	page: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	fields: [
		{
			key: "keywords",
			label: "搜索",
			type: "input",
			placeholder: "根据项目集名称或项目名称搜索",
		},
		{ key: "year", label: "年度范围筛选", type: "year" },
		{
			key: "quarter",
			label: "季度范围筛选",
			type: "select",
			options: {
				list: [
					{ label: "全部", value: "" },
					{ label: "第一季度", value: 1 },
					{ label: "第二季度", value: 2 },
					{ label: "第三季度", value: 3 },
					{ label: "第四季度", value: 4 },
				],
			},
		},
	],
});
// const info = ref(null)
const tableData = ref([]);
const tableHead = ref([
	{
		prop: "projectSetName",
    label: "项目集名称",
    minWidth: 100,
	},
	{
		prop: "projectName",
    label: "项目名称",
    minWidth: 100,
	},
	{
		prop: "projectId",
    label: "项目编号",
    minWidth: 120,
	},
	{
		prop: "year",
    label: "年度",
    minWidth: 80,
	},
	{
		prop: "quarter",
    label: "季度",
    minWidth: 80,
	},
	{
		prop: "status",
		label: "状态",
		formatter: (row) => {
			return row.status ? "已申报" : "未申报";
    },
    minWidth: 80,
	},
	{
		prop: "accessAmount",
    label: "已批预算金额",
    minWidth: 120
	},
	{
		prop: "executeAmount",
    label: "已执行金额",
    minWidth: 100,
	},
]);
const budgetSubjectList = ref([]);

const props = {
	lazy: true,
	emitPath: false,
	async lazyLoad(node, resolve) {
		const { level } = node;
		try {
			if (level === 0) {
				await getBudgetSubjectList({
					subjectId: "",
					subjectType: "1",
				});
				let nodes = [];
				budgetSubjectList.value.forEach((item) => {
					nodes.push({
						value: item.subjectId,
						label: item.subjectName,
						leaf: level >= 4,
					});
				});
				resolve(nodes);
			}
			if (level > 0 && level < 5) {
				await getBudgetSubjectList({
					subjectId: node.value,
					subjectType: "1",
				});
				let nodes = [];
				budgetSubjectList.value.forEach((item) => {
					nodes.push({
						value: item.subjectId,
						label: item.subjectName,
						leaf: level >= 4,
					});
				});
				resolve(nodes);
			}
		}catch (e) {
			let nodes = [];
			resolve(nodes);
		}
	},
};
const selectChange = (e) => {
	console.log(e);
};
const getBudgetSubjectList = async (param) => {
	return await managementApi.getBudgetSubjectList(param).then((res) => {
		budgetSubjectList.value = res.data;
	});
};

let Router = useRouter();
const projectProposal = (row) => {
	Router.push({
		path: "/businessFinance/fundManagement/fundBudgetManagement/budgeting",
	});
};
const viewDialogRef = ref(null);
const lookProposal = (row) => {
	viewDialogRef.value.state.centerDialogVisible = true;
	viewDialogRef.value.getData({
		...row,
		subjectId: state.searchParam.name || null,
	});
};
//搜索接口请求
const searchList = (e) => {
	if (state.searchParam.name) {
		e.subjectId = state.searchParam.name;
	}

	getPage(e);
};
const resetList = (e) => {
	state.searchParam.name = "";
	getPage();
};
//分页变化
const pageChange = (e) => {
	state.page.page = e.page;
	state.page.pageSize = e.limit;
	getPage();
};
const getPage = (e) => {
	let obj = {
		pageNum: state.page.page,
		pageSize: state.page.pageSize,
		param: {
			...e,
		},
	};
	managementApi.getManagementPlanPage(obj).then((res) => {
		if (res.code == "200") {
			tableData.value = res.data.content;
			state.page.total = res.data.totalSize;
		}
	});
};

onMounted(() => {
	getPage();
});
</script>

<style lang="scss" scoped>
.tobeDone {
	width: 100%;
	height: 100%;
}
</style>
